import { useState } from "react"

function MyComponent(){

    const [name,setName] = useState("guest")

    const [quantity,setQuantity] = useState(0)

    const [comment,setComment] = useState("")

    const [payment,setPayment] = useState("")

    const [shipping,setShippingk] = useState("")


    const handleNameChange = (event)=>{
        setName(event.target.value)
    }

    const handleQualityChange = (event)=>{
        setQuantity(event.target.value)
    }

    const handleCommentChange = (event)=>{
        setComment(event.target.value)
    }

    const handlePaymentChange = (event)=>{
        setPayment(event.target.value)
    }
    
    const handleShippingChange = (event)=>{
        setShippingk(event.target.value)
    }

    return (
        <div>
            <input value={name} onChange={handleNameChange}/>
            <p>Name: {name}</p>

            <input value={quantity} onChange={handleQualityChange} type="number"/>
            <p>Quantity: {quantity}</p> 

            <textarea value={comment} onChange={handleCommentChange}
            placeholder="Enter delivery instruction here"/>
            <p>comment: {comment}</p>

            <select value={payment} onChange={handlePaymentChange}>
                <option value="">Select one option</option>
                <option value="visa">Visa</option>
                <option value="Alipay">Alipay</option>
                <option value="Wechat">Wechat</option>


            </select>
            <p>payment: {payment}</p>


            <div>
                <label>
                    <input type="radio" value="pickup" 
                    onChange={handleShippingChange}
                    checked={shipping === "pickup"}/>
                    pick up
                </label>
                <label>
                    <input type="radio" value="deliever"
                    onChange={handleShippingChange}
                    checked={shipping === "deliever"}/>
                    deliever
                </label>
                <p>Shipping: {shipping}</p>
            </div>


        </div>
    )
}

export default MyComponent